<template>
	<uni-transition :show="show" mode-class="slide-right" :duration="500">
		<view style="background-color: #F4FAF8; height: 2000rpx;">
			<tabbar title="修改昵称" v-model:show="show"/>
			<view class="flex justify-center" style="margin-top: 110rpx;">
				<view class="box">
					<text class="title">注销后无法使用此app所有服务</text>
					<input type="text" placeholder="请输入手机号码" v-model="phonenum"/>
				</view>
			</view>
			<view class="flex justify-center">
				<button @click="cancelAccount">注销</button>
			</view>
		</view>
	</uni-transition>
</template>

<script lang="ts" setup>
import uniTransition from '@/uni_modules/uni-transition/components/uni-transition/uni-transition.vue';
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
import { useSave } from '@/store/index';
import { userDelete, userGet, userUpdate, type userputType } from '@/api/user_api';
//定义一个布尔值控制返回事件
const show:Ref<boolean> = ref(false);
//手机号
const phonenum:Ref<string> = ref('')
//状态机
const deletStore = useSave()
console.log(deletStore.userInfo);
//注销函数
const cancelAccount = async ()=>{
	if(!phonenum.value||!deletStore.userInfo?.objectId){
		uni.showToast({
			title:'无效空值',
			icon:'none',
			duration:2000
		})
		return
	}
	// 获取数据库中的值
	let res = await userGet(deletStore.userInfo?.objectId)
	console.log(res);
	console.log(res.data.phone);
	if(phonenum.value===res.data.phone){
		// 清空状态机
		deletStore.userInfo = null
		//调用删除接口
		userDelete()
		uni.reLaunch({
			url:'/pages/login/login'
		})
	}else{
		uni.showToast({
			title:'暂时无法注销，请重试或联系我们',
			icon:'none',
			duration:2000
		})
		return
	}
}

// 生命周期，保证动画效果
onMounted(() => {
  // 延迟显示以触发动画
  setTimeout(() => {
    show.value = true;
  }, 50);
});
</script>

<style lang="scss">
.box{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 650rpx;
	background-color: #fff;
	border-radius: 40rpx;
	box-shadow: 5rpx 5px 50rpx rgba(147,160,151, 0.2);
	padding-bottom: 70rpx;
}
.title{
	font-size: 33rpx;
	font-weight: bold;
	margin-top: 70rpx;
}
button{
	width: 450rpx;
	margin-top: 60rpx;
	color: #fff;
	background-color: #F04C4B;
	border-radius: 20rpx;
}
input{
	background-color: #F4FAF8;
	height: 100rpx;
	width: 550rpx;
	border-radius: 20rpx;
	margin-top: 40rpx;
	padding: 30rpx;
}
</style>